<template>
  <div class="detail">
    <Banner  @closeIcon="closeIcon" :bannerImg="bannerImg" :sightName="sightName" :gallaryImgs="gallaryImgs"/>
    <Header :flag="flag" />
    <div class="content">
      <List :list="list" />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Banner from './children/Banner.vue'
import Header from './children/Header.vue'
import List from './children/List.vue'
export default {
  name: 'Detail',
  components: {
    Banner,
    Header,
    List
  },
  data () {
    return {
      bannerImg: '',
      categoryList: [],
      gallaryImgs: [],
      sightName: '',
      flag: true,
      list: []
    }
  },
  mounted () {
    this.getDetailInfo()
  },
  methods: {
    closeIcon () {
      this.flag = !this.flag
    },
    getDetailInfo () {
      axios.get('http://localhost:8080/mock/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(res => {
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.bannerImg = data.bannerImg
          this.list = data.categoryList
          this.sightName = data.sightName
          this.gallaryImgs = data.gallaryImgs
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .content
   height 50rem
</style>
